<template>
  <div class="svg-container">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="109"
      height="118"
      fill="none"
      class="animated-svg"
    >
      <path
        stroke="url(#a)"
        stroke-dasharray="2 2"
        stroke-linejoin="round"
        class="flowing-border"
        d="m57.055 57.453-.247.435 1.703.968.247-.434 1.703.969-.247.434 1.703.969.247-.435 1.703.97-.247.434 1.703.968.247-.434 1.703.969-.247.434 1.704.969.247-.435 1.703.97-.247.434 1.703.968.247-.434 1.703.969-.247.434 1.703.969.247-.435 1.703.97-.247.434 1.703.968.247-.434 1.703.969-.247.434 1.704.969.247-.435 1.703.97-.247.434 1.703.968.247-.434 1.703.969-.247.434 1.703.969.247-.435 1.703.97-.247.434 1.703.968.247-.434 1.703.969-.247.434 1.704.969.247-.435 1.703.97-.247.434 1.703.968.247-.434 1.703.969-.247.434 1.703.969.247-.435 1.703.97-.247.434 1.703.968.247-.434 1.703.969-.247.434.087.05-.087.05.247.434-1.703.97-.247-.435-1.703.968.247.435-1.703.969-.247-.435-1.703.969.247.434-1.703.97-.247-.435-1.703.968.247.435-1.703.969-.248-.435-1.703.969.247.434-1.703.97-.247-.435-1.703.968.247.435-1.703.969-.247-.435-1.703.969.247.434-1.703.969-.247-.434-1.703.968.247.435-1.703.969-.248-.435-1.703.969.247.434-1.703.969-.247-.434-1.703.968.247.435-1.703.969-.247-.435-1.703.969.247.434-1.703.969-.247-.434-1.703.968.247.435-1.703.969-.248-.435-1.703.969.247.434-1.703.969-.247-.434-1.703.968.247.435-1.703.969-.247-.435-1.703.969.247.434-1.703.969-.247-.434-1.703.968.247.435-1.703.969-.247-.435-.605.344-.605-.344-.247.435-1.703-.969.247-.435-1.703-.968-.247.434-1.703-.969.247-.434-1.703-.969-.247.435-1.703-.969.247-.435-1.703-.968-.247.434-1.703-.969.247-.434-1.703-.969-.248.435-1.703-.969.247-.435-1.703-.968-.247.434-1.703-.969.247-.434-1.703-.969-.247.435-1.703-.969.247-.435-1.703-.968-.247.434-1.703-.969.247-.434-1.704-.969-.247.435-1.703-.969.247-.435-1.703-.968-.247.434-1.703-.969.247-.434-1.703-.969-.247.435-1.703-.97.247-.434-1.703-.968-.247.434-1.703-.969.247-.434-1.704-.969-.247.435-1.703-.97.247-.434-1.703-.968-.247.434-1.703-.969.247-.434-1.703-.969-.247.435-1.703-.97.247-.434-1.703-.968-.247.434-1.703-.969.247-.434L1.01 87l.088-.05-.247-.434 1.703-.97.247.435 1.703-.968-.247-.435 1.703-.969.247.435 1.703-.969-.247-.434 1.703-.97.247.435 1.703-.968-.247-.435 1.703-.969.248.435 1.703-.969-.247-.434 1.703-.97.247.435 1.703-.968-.247-.435 1.703-.969.247.435 1.703-.969-.247-.434 1.703-.97.247.435 1.703-.968-.247-.435 1.703-.969.247.435 1.704-.969-.247-.434 1.703-.97.247.435 1.703-.968-.247-.435 1.703-.969.247.435 1.703-.969-.247-.434 1.703-.97.247.435 1.703-.968-.247-.435 1.703-.969.247.435 1.704-.969-.247-.434 1.703-.97.247.435 1.703-.968-.247-.435 1.703-.969.247.435 1.703-.969-.247-.434 1.703-.97.247.435 1.703-.968-.247-.435 1.703-.969.247.435.605-.345.605.345.247-.435 1.703.97Z"
      />
      <g filter="url(#b)">
        <path fill="#16474B" d="m10 86 44.5-25L99 86l-44.5 25L10 86Z" />
      </g>
      <path
        stroke="url(#c)"
        stroke-linejoin="round"
        d="M97.98 86 54.5 110.426 11.02 86 54.5 61.573 97.98 86Z"
      />
      <path
        stroke="url(#d)"
        stroke-linejoin="round"
        d="M107.988 72 54.5 102.425 1.01 72 54.5 41.574 107.988 72Z"
        id="motion-path"
      />
      <!-- 沿路径运动的发光圆点 -->
      <circle r="2" fill="#87F5FF" class="moving-dot">
        <animateMotion dur="6s" repeatCount="indefinite">
          <mpath href="#motion-path" />
        </animateMotion>
      </circle>
      <g filter="url(#e)">
        <path fill="url(#f)" d="m10 71 44.5-25L99 71 54.5 96 10 71Z" />
      </g>
      <path
        stroke="url(#g)"
        stroke-linejoin="round"
        d="M97.98 71 54.5 95.426 11.02 71 54.5 46.573 97.98 71Z"
      />
      <path fill="url(#h)" d="M10 0h89v71H10z" class="background-rise" />
      <g filter="url(#i)" opacity=".8" class="glow-dot glow-dot-1">
        <circle cx="47" cy="83" r="1" fill="#A3E3FF" />
      </g>
      <g filter="url(#j)" opacity=".8" class="glow-dot glow-dot-2">
        <circle cx="74.5" cy="72.5" r="1.5" fill="#EEF4FF" />
      </g>
      <g filter="url(#k)" opacity=".8" class="glow-dot glow-dot-3">
        <circle cx="35.5" cy="69.5" r="1.5" fill="#A3E3FF" />
      </g>
      <g filter="url(#l)" opacity=".8" class="glow-dot glow-dot-4">
        <circle cx="27.5" cy="47.5" r="1.5" fill="#D0F4FF" />
      </g>
      <g filter="url(#m)" opacity=".8" class="glow-dot glow-dot-5">
        <circle cx="37" cy="29" r="1" fill="#BDD0F0" />
      </g>
      <defs>
        <filter
          id="b"
          width="89"
          height="50"
          x="10"
          y="61"
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="4" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0.569238 0 0 0 0 0.964103 0 0 0 0 1 0 0 0 0.5 0" />
          <feBlend in2="shape" result="effect1_innerShadow_974_1240" />
        </filter>
        <filter
          id="e"
          width="89"
          height="50"
          x="10"
          y="46"
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="4" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0.569238 0 0 0 0 0.964103 0 0 0 0 1 0 0 0 0.5 0" />
          <feBlend in2="shape" result="effect1_innerShadow_974_1240" />
        </filter>
        <filter
          id="i"
          width="12"
          height="12"
          x="41"
          y="77"
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feMorphology
            in="SourceAlpha"
            operator="dilate"
            radius="1"
            result="effect1_dropShadow_974_1240"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="2" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_974_1240" />
          <feBlend in="SourceGraphic" in2="effect1_dropShadow_974_1240" result="shape" />
        </filter>
        <filter
          id="j"
          width="13"
          height="13"
          x="68"
          y="66"
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feMorphology
            in="SourceAlpha"
            operator="dilate"
            radius="1"
            result="effect1_dropShadow_974_1240"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="2" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_974_1240" />
          <feBlend in="SourceGraphic" in2="effect1_dropShadow_974_1240" result="shape" />
        </filter>
        <filter
          id="k"
          width="13"
          height="13"
          x="29"
          y="63"
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feMorphology
            in="SourceAlpha"
            operator="dilate"
            radius="1"
            result="effect1_dropShadow_974_1240"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="2" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_974_1240" />
          <feBlend in="SourceGraphic" in2="effect1_dropShadow_974_1240" result="shape" />
        </filter>
        <filter
          id="l"
          width="13"
          height="13"
          x="21"
          y="41"
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feMorphology
            in="SourceAlpha"
            operator="dilate"
            radius="1"
            result="effect1_dropShadow_974_1240"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="2" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_974_1240" />
          <feBlend in="SourceGraphic" in2="effect1_dropShadow_974_1240" result="shape" />
        </filter>
        <filter
          id="m"
          width="12"
          height="12"
          x="31"
          y="23"
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feMorphology
            in="SourceAlpha"
            operator="dilate"
            radius="1"
            result="effect1_dropShadow_974_1240"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="2" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_974_1240" />
          <feBlend in="SourceGraphic" in2="effect1_dropShadow_974_1240" result="shape" />
        </filter>
        <linearGradient id="a" x1="54.5" x2="54.5" y1="56" y2="118" gradientUnits="userSpaceOnUse">
          <stop stop-color="#286166" stop-opacity="0" />
          <stop offset="1" stop-color="#4CB9C3" />
        </linearGradient>
        <linearGradient id="c" x1="54.5" x2="54.5" y1="61" y2="111" gradientUnits="userSpaceOnUse">
          <stop stop-color="#166E76" />
          <stop offset="1" stop-color="#3BB2BD" />
        </linearGradient>
        <linearGradient id="d" x1="54.5" x2="54.5" y1="41" y2="103" gradientUnits="userSpaceOnUse">
          <stop stop-color="#286166" stop-opacity="0" />
          <stop offset="1" stop-color="#87F5FF" />
        </linearGradient>
        <linearGradient id="f" x1="54.5" x2="54.5" y1="46" y2="96" gradientUnits="userSpaceOnUse">
          <stop stop-color="#16474B" />
          <stop offset=".476" stop-color="#3AAEB8" />
          <stop offset=".721" stop-color="#51D3DF" />
          <stop offset="1" stop-color="#A4F0F7" />
        </linearGradient>
        <linearGradient id="g" x1="54.5" x2="54.5" y1="46" y2="96" gradientUnits="userSpaceOnUse">
          <stop stop-color="#0D454A" stop-opacity="0" />
          <stop offset=".455" stop-color="#B0E8ED" stop-opacity=".9" />
          <stop offset="1" stop-color="#C2FAFF" />
        </linearGradient>
        <linearGradient id="h" x1="54.5" x2="54.5" y1="0" y2="71" gradientUnits="userSpaceOnUse">
          <stop stop-color="#2D838B" stop-opacity="0" />
          <stop offset=".5" stop-color="#2D838B" stop-opacity=".2" />
          <stop offset="1" stop-color="#2D838B" stop-opacity="0" />
        </linearGradient>
      </defs>
    </svg>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
.svg-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.animated-svg {
  transform-origin: center;
  filter: drop-shadow(0 0 20px rgba(75, 185, 195, 0.3));

  &:hover {
    filter: drop-shadow(0 0 30px rgba(75, 185, 195, 0.6));
  }
}

// 发光点上升动画
.glow-dot {
  animation: glowRise 3s ease-in-out infinite;

  &.glow-dot-1 {
    animation-delay: 0s;
  }

  &.glow-dot-2 {
    animation-delay: 0.6s;
  }

  &.glow-dot-3 {
    animation-delay: 1.2s;
  }

  &.glow-dot-4 {
    animation-delay: 1.8s;
  }

  &.glow-dot-5 {
    animation-delay: 2.4s;
  }
}

@keyframes glowRise {
  0% {
    opacity: 0.3;
    transform: translateY(0px) scale(0.8);
    filter: brightness(1);
  }
  25% {
    opacity: 0.8;
    transform: translateY(-3px) scale(1);
    filter: brightness(1.2) drop-shadow(0 0 6px currentColor);
  }
  50% {
    opacity: 1;
    transform: translateY(-8px) scale(1.2);
    filter: brightness(1.5) drop-shadow(0 0 12px currentColor);
  }
  75% {
    opacity: 0.6;
    transform: translateY(-15px) scale(1.1);
    filter: brightness(1.3) drop-shadow(0 0 8px currentColor);
  }
  100% {
    opacity: 0;
    transform: translateY(-25px) scale(0.5);
    filter: brightness(1);
  }
}

// 边框流动动画
.flowing-border {
  stroke-dasharray: 4 4;
  animation: flow 3s linear infinite;
}

@keyframes flow {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 8;
  }
}

// 沿路径运动的发光圆点
.moving-dot {
  filter: drop-shadow(0 0 8px #87f5ff) drop-shadow(0 0 16px #87f5ff);
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.8;
    filter: drop-shadow(0 0 8px #87f5ff) drop-shadow(0 0 16px #87f5ff);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 12px #87f5ff) drop-shadow(0 0 24px #87f5ff)
      drop-shadow(0 0 32px #87f5ff);
  }
}

// 背景上升动画
.background-rise {
  animation: backgroundRise 4s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes backgroundRise {
  0% {
    opacity: 0.3;
    transform: translateY(10px) scaleY(0.8);
  }
  25% {
    opacity: 0.6;
    transform: translateY(5px) scaleY(0.9);
  }
  50% {
    opacity: 0.8;
    transform: translateY(0px) scaleY(1);
  }
  75% {
    opacity: 0.6;
    transform: translateY(-5px) scaleY(1.05);
  }
  100% {
    opacity: 0.3;
    transform: translateY(-10px) scaleY(1.1);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .svg-container {
    padding: 10px;
  }

  .animated-svg {
    width: 80px;
    height: auto;
  }
}
</style>
